<template>
  <view :class="theme">
    <view class="mt-20 fd-row ai-center bg-2 fs-28" style="padding: 50rpx 30rpx">
      <label style="width: 150rpx;">头像</label>
      <view @click="chooseImage" class="f1 height-100percent jc-end ai-center fd-row">
        <view class="br-50percent p-4 mr-20" style="background-image: linear-gradient(221deg, #56bdfc, #b99cf9);">
          <u-image style="background-color: #fff;" radius="50%" width="90" height="90"
            :src="temp_avatar || userInfo.avatar || `/static/logo.png`" />
        </view>
        <u-icon name="arrow-right" color="#999" size="28" />
      </view>
    </view>
    <view class="mt-2 fd-row ai-center bg-2 fs-28">
      <label style="width: 150rpx;" class="ml-36 fs-28">昵称</label>
      <input v-model="userInfo.nickname" length="12" class="fs-28 f1 height-100percent text-right"
        style="padding: 36rpx 74rpx 36rpx 36rpx;" type="text" placeholder="请输入昵称">
    </view>
    <view class="mt-2 fd-row ai-center jc-sb bg-2 fs-28">
      <label style="width: 150rpx;" class="ml-36 fs-28">性别</label>
      <picker @change="changeGender" :range="genderRange.slice(1)" class="f1 p-36 ai-end">
        <view class="f1 fd-row ai-center">
          <label class="height-100percent mr-20">{{ genderRange[userInfo.sex] }}</label>
          <u-icon name="arrow-right" color="#999" size="28" />
        </view>
      </picker>
    </view>

    <navigator url="/pages/client/auth/reset" class="mt-20 fd-row ai-center jc-sb bg-2 fs-28">
      <label style="width: 150rpx;" class="ml-36 fs-28">登录密码</label>
      <label class="f1 jc-end p-36">
        <text class="color-6 fs-24 mr-20">******</text>
        <u-icon name="arrow-right" color="#999" size="28" />
      </label>
    </navigator>
    <navigator url="/pages/client/main/setPayPassword" class="mt-2 fd-row ai-center jc-sb bg-2 fs-28">
      <label style="width: 150rpx;" class="ml-36 fs-28">支付密码</label>
      <label class="f1 jc-end p-36">
        <text class="color-6 fs-24 mr-20">点击设置</text>
        <u-icon name="arrow-right" color="#999" size="28" />
      </label>
    </navigator>
    <view class="mt-2 fd-row ai-center jc-sb bg-2 fs-28">
      <label style="width: 150rpx;" class="ml-36 fs-28">手机号码</label>
      <label class="f1 jc-end p-36">
        <text class="color-6 fs-24 mr-20">{{ formatPhoneNumber(userInfo.mobile) }}</text>
      </label>
    </view>

    <button @click="saveInfo" hover-class="tap-hover" style="margin: 100rpx 66rpx;"
      class="bg-6 br-16 color-2 text-center">保存</button>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { formatPhoneNumber } from "@/common/libs/utils";
import { onShow } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";

const { $config = {} } = getApp().globalData || {};
const { theme } = useMapState(["theme"]);

const genderRange = ["未知", "男", "女"];
const temp_avatar = ref("");
const userInfo = reactive({
  avatar: "",
  nickname: "",
  sex: 0,
  mobile: "-",
  otc: ""
});
onShow(() => {
  uni.showToast({ icon: "loading" });
  uni.request({
    url: $config.API_USER_INFO_GET,
    success({ data }: any) {
      Object.assign(userInfo, data);
      uni.hideToast();
    },
  });
});

const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    success(e) {
      temp_avatar.value = e.tempFilePaths[0];
    }
  })
}

const changeGender = ({ detail }: any) => {
  userInfo.sex = +detail.value + 1;
}

const saveInfo = async () => {
  if (!/^[\u4E00-\u9FA5a-zA-Z0-9]{1,12}$/.test(userInfo.nickname)) {
    uni.showToast({ title: "昵称输入不合法或超出限制", icon: "none" });
    return;
  }
  try {
    const data: AnyObject = {
      nickname: userInfo.nickname,
      sex: userInfo.sex
    };
    if (temp_avatar.value) {
      uni.showToast({ icon: "loading", mask: true, title: "图片上传中...", });
      const uploadRes: any = await uni.uploadFile({
        url: $config.API_FILE_UPLOAD,
        filePath: temp_avatar.value,
        formData: { type: "", position: "avatar" },
        name: "file"
      });
      data.avatar = uploadRes.data[0];
      uni.hideToast();
    };
    uni.showToast({ icon: "loading", mask: true, title: "资料保存中...", });
    uni.request({
      url: $config.API_USER_INFO_SET, data,
      success: () => {
        uni.hideToast();
        uni.navigateBack();
      }
    });
  } catch (error) {
    uni.showToast({ icon: "none", title: "图片上传失败" })
  }
}

</script>

<style lang="scss" scoped>
// scss
</style>